<template>
<div class="customer-dialog">
  <el-tooltip class="item" effect="dark" transition="" :content="$t('public.customerInfo')" placement="bottom" m7automation="customerInfo">
    <div class="block text" @click="toggle">
      <i class="iconfont icon-chakanxinxi"></i>
    </div>
  </el-tooltip>
  <div v-if="!loading" class="cust_info" v-bind:class="{ 'layout' : isShow, 'layin': !isShow, 'screen-top':callScreen}">
    <span :id="callScreen?'close_custom_detail':''" class="el-icon-close" @click="close"></span><h4>{{$t('public.customerInfo')}}</h4>
    <div class="switch-btn"><i class="iconfont icon-danliebuju" :class="showLie === 'one' ? 'current-switch' : ''" @click.stop="changeLie('one')"></i><i :class="showLie === 'two' ? 'current-switch' : ''" class="iconfont icon-shuangliebuju" @click.stop="changeLie('two')"></i></div>
    <table>
      <tbody>
        <el-row :gutter="20">
          <el-col :span="showLie === 'one' ? 24 : 12" v-if="cCustInfo.phone && cCustInfo.phone.length !== 0">
            <tr>
              <td class="label">{{cCustInfo.phoneAlias }}</td>
              <td class="c-phone">
            <span class="c-phone-or-email" v-for="phone in cCustInfo.phone">
              <span>{{ hideTel(phone.tel) }}</span>
              <span v-if="phone.area && !isHidenArea">({{phone.area}})</span>
              <span v-if="phone.memo">({{phone.memo}})</span>
            </span>
              </td>
            </tr>
          </el-col>
          <el-col :span="showLie === 'one' ? 24 : 12" v-if="!isShowItem.weixin && cCustInfo.weixin && cCustInfo.weixin.length !== 0">
            <tr>
              <td class="label">{{ cCustInfo.weixinAlias }}</td>
              <td>
            <span class="c-phone-or-email"
                  v-for="weixin in cCustInfo.weixin">
                <span v-if="weixin.num">
                  {{weixin.num}}
                </span>
                <span v-if="weixin.memo">
                  ({{weixin.memo}})
                </span>
            </span>
              </td>
            </tr>
          </el-col>
          <el-col :span="showLie === 'one' ? 24 : 12" v-if="!isShowItem.email && cCustInfo.email && cCustInfo.email.length !== 0">
            <tr>
              <td class="label">{{ cCustInfo.emailAlias }}</td>
              <td>
            <span class="c-phone-or-email"
                  v-for="email in cCustInfo.email">
                <span v-if="email.email">
                  {{email.email}}
                </span>
                <span v-if="email.memo">
                  ({{email.memo}})
                </span>
            </span>
              </td>
            </tr>
          </el-col>
          <el-col :span="showLie === 'one' ? 24 : 12" v-if="cCustInfo.attachs && cCustInfo.attachs.length !== 0">
            <tr>
              <td class="label">{{$t('public.attach')}}</td>
              <td class="attach" v-for="attach in cCustInfo.attachs">
                <a class='a-img' href="#" v-if="attach.type === 'img' || isImg(attach.id)" @click.stop="handleAttachImgClick(attach)">
                  <img :src="common.getUrl(attach)" :title="attach.name" class="img-rounded" style="margin-right:10px;margin-bottom:10px;width:50px;max-height: 50px;">
                </a>
                <div>
                  <a class="a-name" :href="common.getUrl(attach)" target="_blank" download>{{attach.name}}</a>
                  <span class="iconfont icon-yulan"
                        v-if="attach.name && dataType3.indexOf((attach.name.split('.')[attach.name.split('.').length -1]).toLowerCase()) > -1"
                        @click.stop="showPdfOrMediaOrText({url: common.getUrl(attach,{ noQuery: true}), flag: 'video'})"></span>
                  <span class="iconfont icon-yulan"
                        v-if="attach.name && dataType2.indexOf((attach.name.split('.')[attach.name.split('.').length -1]).toLowerCase()) > -1"
                        @click.stop="showPdfOrMediaOrText({url: common.getUrl(attach,{ noQuery: true}), flag: 'audio'})"></span>
                  <span class="iconfont icon-yulan"
                        v-if="attach.name && dataType1.indexOf((attach.name.split('.')[attach.name.split('.').length -1]).toLowerCase()) > -1"
                        @click.stop="showPdfOrMediaOrText({url: common.getUrl(attach,{ noQuery: true}), flag: 'text'})"></span>
                  <span class="iconfont icon-yulan"
                        v-if="attach.name && dataType.indexOf((attach.name.split('.')[attach.name.split('.').length -1]).toLowerCase()) > -1"
                        @click.stop="showPdfOrMediaOrText({url: common.getUrl(attach,{ noQuery: true}), flag: 'pdf'})"></span>
                  <span class="iconfont icon-yulan"
                  v-if="attach.name && dataType4.indexOf((attach.name.split('.')[attach.name.split('.').length -1]).toLowerCase()) > -1"
                  @click.stop="showPdfOrMediaOrText({url: common.getUrl(attach,{ preDomain: 'https://view.officeapps.live.com/op/view.aspx?src=', noQuery: true}), flag: 'pdf'})"></span>
                  <!--<a class="iconfont icon-yulan" style="padding-left: 10px" :href="qiniu7moorDomain+attach.id" target="_blank"-->
                  <!--v-if="attach.name && dataType.indexOf((attach.name.split('.')[attach.name.split('.').length -1]).toLowerCase()) > -1"></a>-->
                </div>
              </td>
            </tr>
          </el-col>
          <el-col :span="showLie === 'one' ? 24 : 12" v-for="field in formatFields" v-if="!isShowItem[field.k] && field.k.split('-').length<4 && field.desc !== ''">
            <tr>
              <td class="label">{{field.n}}</td>
              <td v-html="field.desc || (Array.isArray(field.v) ? field.v.join(',') : (field.v === '0' && field.t === 'dropdown' ? '' : field.v))"></td>
            </tr>
          </el-col>
        </el-row>
         </tbody>
        </table>
        <table>
          <tbody>
            <el-row :class="fieldFlag === true ? 'border-top' : ''" :gutter="20">
              <el-col :span="showLie === 'one' ? 24 : 12" v-for="field in formatFields" v-if="field.k.split('-').length>4 && field.desc !== ''">
                <tr>
                  <td class="label">{{field.n}}</td>
                  <td v-html="field.desc || (Array.isArray(field.v) ? field.v.join(',') : (field.v === '0' && field.t === 'dropdown' ? '' : field.v))"></td>
                </tr>
              </el-col>
            </el-row>
          </tbody>
        </table>
    <table>
      <tbody>
        <el-row style="border-top: 1px dashed #ccc;" :gutter="20">
          <el-col :span="showLie === 'one' ? 24 : 12" v-if="cCustInfo.batchNo && cCustInfo.batchNo !== ''">
            <tr class="table-group3__tr">
              <td class="label">{{$t('customer.importBatch')}}</td>
              <td>{{cCustInfo.batchNo}}</td>
            </tr>
          </el-col>
          <el-col :span="showLie === 'one' ? 24 : 12" v-if="cCustInfo.createTime && cCustInfo.createTime !== ''">
            <tr class="table-group3__tr">
              <td class="label">{{$t('public.createTime')}}</td>
              <td>{{cCustInfo.createTime}}</td>
            </tr>
          </el-col>
          <el-col :span="showLie === 'one' ? 24 : 12" v-if="cCustInfo.lastUpdateTime && cCustInfo.lastUpdateTime !== ''">
            <tr>
              <td class="label">{{$t('customer.recentlyUpdated')}}</td>
              <td>{{cCustInfo.lastUpdateTime}}</td>
            </tr>
          </el-col>
          <el-col :span="showLie === 'one' ? 24 : 12" v-if="cCustInfo.lastContactTime && cCustInfo.lastContactTime !== ''">
            <tr>
              <td class="label">{{$t('customer.recentContactTime')}}</td>
              <td>{{cCustInfo.lastContactTime}}</td>
            </tr>
          </el-col>
        </el-row>
      </tbody>
    </table>
  </div>
  <big-image :imgInfo="bigImage" @closeImageDialog="closeBigImage" :callScreen="callScreen"></big-image>
</div>
</template>

<script>
import { checkHideTel, isHasFunc } from '@/utils/m7Utils.js'
import { showFieldDesc, getCityValue } from '@/utils/customerUtils.js'
import { qiniu7moorDomain } from '@/utils/qiniuUtils'
import { commitPdfOrMediaOrText } from '@/utils/publicMethod.js'
import BigImage from '@/components/public-modules/bigImage/BigImage'
import { common } from '@/utils/cosUrl'
import { isImg } from '@/utils/util'
export default {
  name: 'ShowCustomerInfo',
  data () {
    return {
      isHidenArea: false,
      showItem: {
        name: ''
      },
      isShowItem: {},
      showLie: 'one',
      dataType4: ['doc', 'xls', 'ppt', 'docx', 'xlsx', 'pptx'],
      dataType3: ['mp4'],
      dataType2: ['mp3', 'wav', 'ogg'],
      dataType1: ['txt', 'TXT'],
      dataType: ['pdf', 'PDF'],
      loading: true,
      oldDic: [],
      isShow: false,
      fieldFlag: false,
      qiniu7moorDomain: qiniu7moorDomain,
      bigImage: {
        bigImageShow: false,
        url: ''
      },
      common,
      isImg
    }
  },
  props: {
    custInfo: Object,
    callScreen: Boolean
  },
  components: {
    BigImage
  },
  methods: {
    changeLie (flag) {
      this.showLie = flag
    },
    // 预览音频、视频、文本、pdf
    showPdfOrMediaOrText (data) {
      commitPdfOrMediaOrText(data)
    },
    toggle () {
      this.isShow = !this.isShow
    },
    close () {
      this.isShow = false
    },
    hideTel (tel) {
      return checkHideTel(tel, this.$store.state.session.user)
    },
    handleAttachImgClick (file) {
      this.bigImage.url = common.getUrl(file, {noQuery: true})
      this.bigImage.bigImageShow = true
    },
    closeBigImage () {
      this.bigImage.bigImageShow = false
      this.bigImage.url = ''
    },
    handleAttachClick (file) {
      const { id, type } = file
      let path = common.getUrl(file, {useAttname: true})
      if (type === 'app') {
        path = `/fileDownload?fileId=${id}`
      }
      this.$store.commit('SET_FILEDOWNLOAD', { path, isSession: false })
    }
  },
  computed: {
    formatFields () {
      let district = ''
      let city = ''
      let count = 1
      this.fieldFlag = false
      return this.custInfo.fields ? this.custInfo.fields.map(field => {
        if (field.t === 'dropdown' || field.t === 'radio' || field.t === 'checkbox') {
          field.desc = showFieldDesc('field', field.t, field.k, field.v)
        } else if (field.k === 'taskId' || field.k === 'taskCalled' || field.k === 'sex' || field.k === 'province') {
          field.desc = showFieldDesc(field.k, field.v)
        } else if (field.k === 'city') {
          // 获取市区 县的值 如果有老数据 则比对出相对应的新数据
          let ctiyOrDistrict = getCityValue(this.oldDic, field.v)
          if (!ctiyOrDistrict) {
            city = field.v
          } else {
            city = ctiyOrDistrict.city
            district = ctiyOrDistrict.district || ''
          }
          field.desc = showFieldDesc('city', city, this.custInfo.province)
        } else if (field.k === 'district') {
          district = district || field.v
          field.desc = showFieldDesc('district', district, city, this.custInfo.province)
        } else {
          field.desc = showFieldDesc('html', field.v)
        }
        if (field.desc !== '' && count < 2 && field.k.split('-').length > 4) {
          count = 2
          this.fieldFlag = true
        }
        return field
      }) : []
    },
    cCustInfo () {
      return this.custInfo
    },
    listenerFun (event) {
      if (!this.$el.contains(event.target)) {
        this.isShow = false
      }
    }
  },
  beforeMount () {
    if (isHasFunc('func_hide_cdr_area', this.$store.state.session.user) || (this.$store.state.session.account.isSouthEastAsia && this.$store.state.session.account.isSouthEastAsia === 'true')) {
      if (this.$store.state.session.user.type === 'admin' && this.$store.state.session.user.exten === '0000') {
        this.isHidenArea = false
      } else {
        this.isHidenArea = true
      }
    }
    Promise.all([
      this.$store.dispatch('getCache', { type: 'custCategorys' }),
      this.$store.dispatch('getCache', { type: 'custTmpls' }),
      this.$store.dispatch('getCache', { type: 'agents' }),
      this.$store.dispatch('getCache', { type: 'getOldDic' }),
      this.$store.dispatch('getCache', { type: 'options', id: 'd7b9c68a-b50f-21d1-d5fd-41ea93f5f49c' })
    ]).then(([, custTmpls, , oldDic]) => {
      this.oldDic = oldDic || []  // ||[] 是为了解决服务没有返回值时，在计算属性里面直接使用导致死循环报错的问题
      let custTmpl = custTmpls[0]
      // 固定的显示字段
      let stableFields = custTmpl.stable_fields
      let data = {}
      stableFields.forEach(ele => {
        this.showItem[ele.name] = ele.value
        data[ele.name] = ele.isShow || false
      })
      if (data.province) {
        data.city = true
        data.district = true
      } else {
        data.city = false
        data.district = false
      }
      this.isShowItem = data
      this.loading = false
    })
  },
  mounted () {
    document.addEventListener('click', this.listenerFun)
  },
  beforeDestroy () {
    document.removeEventListener('click', this.listenerFun)
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/common.styl'
.switch-btn
  position: absolute;
  right: 60px;
  top: 5px;
  height 28px
  border: 1px solid #ccc;
  border-radius: 4px;
.border-top
  border-top 1px dashed #ccc
.cust_info table a:hover
  text-decoration: underline
tr
   vertical-align top
.text
    text-align center
.layout
  transition transform 0.35s
  box-shadow 0 3px 6px rgba(0, 0, 0, .3)
  animation movelayout .4s
  @keyframes movelayout
    0%
      width 300px
    100%
      width 610px

.layin
  width:0px
  transition transform 0.35s
.block
  width 100%
  height 100%
.cust_info
  position fixed
  z-index 1998
  right 0
  top 54px
  bottom 0
  background $cf-white
  overflow-y auto
  overflow-x hidden
  cursor auto
  .el-icon-close
    float right
    width 14px
    margin-right 20px
    font-size 14px
    color $cf-gray5
    line-height 40px
    cursor pointer
  h4
    display block
    color $cf-gray1
    border-bottom 1px solid $c-border1
    text-indent 20px
    line-height 42px
  table
    color $cf-gray3
    width 570px
    margin 0px 20px
    font-size 12px
    box-sizing border-box
    tr
      td
        max-width 430px
        word-break break-all
        white-space normal
        color $cf-gray0
        .c-phone-or-email
          margin-right 14px
      .label
        width 80px
        padding-right 10px
        color $cf-gray3
      .attach
        display flex
        flex-direction column
        justify-content space-between
        .a-img
          flex 1
        .a-name
          flex 1
          padding-right 5px

.iconfont
  font-size 14px
  color $c-main
.screen-top
  top 176px
  position absolute
.table-group2__tr
  margin-top 30px
.icon-shuangliebuju
.icon-danliebuju
  cursor pointer
  padding: 7px 8px 5px 8px;
  font-size: 16px
  background #fff
.current-switch
  color #fff
  background $c-main
</style>
